/**
 * axios封装思路：
 * 1. 安装和导入axios
 * 2. 创建新axios实例，配置api基础地址、超时时间等
 * 3. 添加两个拦截器：
 *    1. 请求拦截器：给header统一添加token
 *    2. 响应拦截器：简化数据的返回和处理401token过期
 */
import axios from 'axios'
// 导入store实例
import store from '@/store'
// 导入router实例
import router from '@/router'

const instance = axios.create({
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net'
})

// 添加请求拦截器=> 发请求之前执行
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  const { token } = store.state.user.profile
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器=> 请求成功并拿到后台返回的数据
instance.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么=》简化数据的返回
  return response.data
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么 =》处理401
  if (error.response.status === 401) {
    // 需求：401的情况下，传递当前出现401页面path地址给login登录页，以便下次登录成功回到上次访问的页面
    /**
     * 1. 清除本地用户数据
     * 2. 获取当前401页面的path地址=> 怎么获取？
     * 3. 携带401页面path地址跳回登录页
     */
    store.dispatch('logoutAction')
    // vue3下使用router.currentRoute需要加.value(ref函数定义的)
    const redirectUrl = router.currentRoute.value.path
    router.replace(`/login?redirectUrl=${redirectUrl}`)
  }
  return Promise.reject(error)
})

/**
 * instance发请求写法：
 * // 写法1
 instance({
  url:'',
  method:'get',
  params:
 })
 // 写法2
 instance.get()
 instance.post()

 需求：基于instance封装一个方法，支持传入请求地址，方法，请求携带数据3个参数发送请求
 示例：request(url, method, reqParams)
 目的：可以去自定义发请求传递的参数
 */
/**
 *
 * @param {*} url 请求地址
 * @param {*} method 请求方法：get | post
 * @param {*} reqParams 请求携带数据
 * @returns
 */
const request = (url, method, reqParams) => {
  return instance(
    {
      url,
      method,
      // 请求携带数据：1. get请求：参数名params  2. post、put等：参数data
      [method === 'get' ? 'params' : 'data']: reqParams
    }
  )
}

export default request
